<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./global/element/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="./global/style/index.css">

</head>
<body>

<el-container style="height: 100%;" id="app" v-cloak>
    <el-aside :class="[{'index-el-side': (isCollapse == true)},{'index-el-side1':(isCollapse == false)}]" style="background-color: rgb(0,21,41)">

        <el-menu :default-openeds="openIndex" :default-active="activeMenuIndex" background-color="#001529" :collapse="isCollapse"
                 text-color="#eeeeee" active-text-color="#eeeeee" unique-opened="uniqueOpened"
                 class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item index="0" style="padding: 0;height: 60px">
                <span slot="title">

                    <div style="height: 60px;text-align: center;background-color: rgb(0,33,64)">
                        <el-row>
                          <el-col :span="8">
                              <img src="./global/image/default.jpg" style="width: 50px;">
                          </el-col>
                          <el-col :span="16" style="text-align: left">
                              <h1 style="color: white;margin: 0;font-size: 40px;font-family: monospace">Bai Cai</h1>
                          </el-col>
                        </el-row>
                    </div>
                </div>
                </span>
            </el-menu-item>
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>dashboard</template>
                <el-menu-item index="1-1">工作台</el-menu-item>
                <el-menu-item index="1-2">周报</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>应用</template>
                <el-menu-item index="2-1" >应用管理</el-menu-item>
                <el-menu-item index="2-2" >代码质量</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>模板</template>
                <el-menu-item index="3-1" >项目排期</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title"><i class="el-icon-setting"></i>关于</template>
                <el-menu-item index="4-1">关于我们</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>

    <el-container>
        <el-header class="index-el-header">
            <el-row>
                <el-col :span="12" style="line-height: 60px">
                    <img src="./global/image/close.png" style="width: 24px" @click="switchMenuStatus">
                </el-col>
                <el-col :span="12" style="text-align: right">
                    <img src="./global/image/tip.png" style="width: 16px">
                    <el-badge is-dot class="item">

                    </el-badge>

                    <el-popover placement="bottom" width="40" trigger="hover" visible-arrow=false>
                        <div>
                            <a href='#'  @click="goPersonalCenter">
                                <div height="20px" class="index-a-selected">
                                    个人中心
                                </div>
                            </a>
                            <hr>
                            <a href='#' @click="logout" >
                                <div height="20px" class="index-a-selected">
                                    退出登录
                                </div>
                            </a>
                        </div>

                        <span slot="reference">
                            <img :src="currUsers.headUrl"  style="width: 24px;margin-left: 30px">
                            <span style="font-size: 18px;margin-left: 10px" v-text="currUsers.name"></span>
                        </span>
                    </el-popover>
                </el-col>
            </el-row>
            <div style="background-color: white;height: 140px;margin-top: 10px">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item> <a href="#" @click="toIndex">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '1-1' || activeMenuIndex == '0'">工作台</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '1-2'">周报</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '2-1'">应用管理</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '2-2'">代码质量</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '3-1'">项目排期</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="activeMenuIndex == '4-1'">关于我们</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'memberInfo'">成员信息</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'addUser'">添加成员</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'createApp'">创建应用</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'createProject'">创建项目</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'createDemand'">创建需求</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'personalCenter'">个人中心</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'editUser'">修改信息</el-breadcrumb-item>
                    <el-breadcrumb-item v-show="optionsCode == 'changePwd'">修改密码</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </el-header>

        <index-comp v-if="activeMenuIndex == '1-1'" ></index-comp>
        <week-report v-if="activeMenuIndex == '1-2'"></week-report>
        <app-manger v-if="(activeMenuIndex == '2-1' && optionsCode == '')" :options-code.sync=optionsCode></app-manger>
        <code-sonar v-if="activeMenuIndex == '2-2'"></code-sonar>
        <project-date v-if="(activeMenuIndex == '3-1' && optionsCode == '')" :options-code.sync=optionsCode></project-date>
        <about-ours v-if="(activeMenuIndex == '4-1' && optionsCode == '')" :options-code.sync=optionsCode :user-id.sync=userId></about-ours>
        <member-info v-if="(activeMenuIndex == '4-1' && optionsCode=='memberInfo')" :user-id.sync=userId></member-info>
        <add-user v-if="(activeMenuIndex == '4-1' && optionsCode=='addUser')"></add-user>
        <create-app v-if="(activeMenuIndex == '2-1' && optionsCode=='createApp')"></create-app>
        <create-project v-if="(activeMenuIndex == '3-1' && optionsCode=='createProject')"></create-project>
        <create-demand v-if="(activeMenuIndex == '3-1' && optionsCode=='createDemand')"></create-demand>
        <personal-center v-if="optionsCode=='personalCenter'" :options-code.sync=optionsCode></personal-center>
        <edit-user v-if="optionsCode=='editUser'" :options-code.sync=optionsCode></edit-user>
        <change-pwd v-if="optionsCode=='editPwd'" :options-code.sync=optionsCode></change-pwd>
        <app-details v-if="optionsCode=='appDetail'" :options-code.sync=optionsCode :project-id="projectId"></app-details>
        <edit-app v-if="optionsCode=='editApp'" :options-code.sync=optionsCode :project-id="projectId"></edit-app>
        <edit-project v-if="optionsCode=='editProject'" :options-code.sync=optionsCode :template-id="templateId"></edit-project>
        <delay-project v-if="optionsCode=='projectDelay'" :options-code.sync=optionsCode :template-id="templateId"></delay-project>
        <delay-project-info v-if="optionsCode=='projectDelayInfo'" :options-code.sync=optionsCode :template-id="templateId"></delay-project-info>

    </el-container>
</el-container>

<script src="./global/vue/vue.js"></script>
<script src="./global/compoents/VueUtils.js"></script>
<script src="./global/axios/axios.min.js"></script>
<script src="./global/element/lib/index.js"></script>
<script src="./global/compoents/index.js"></script>
<script src="./global/compoents/aboutOurs.js"></script>
<script src="./global/compoents/appManger.js"></script>
<script src="./global/compoents/codeSonar.js"></script>
<script src="./global/compoents/projectDate.js"></script>
<script src="./global/compoents/weekReport.js"></script>
<script src="./global/compoents/memberInfo.js"></script>
<script src="./global/compoents/bus.js"></script>
<script src="./global/compoents/addUser.js"></script>
<script src="./global/compoents/createApp.js"></script>
<script src="./global/compoents/createProject.js"></script>
<script src="./global/compoents/createDemand.js"></script>
<script src="./global/compoents/personalCenter.js"></script>
<script src="./global/compoents/editUserData.js"></script>
<script src="./global/compoents/changePwd.js"></script>
<script src="./global/compoents/appDetails.js"></script>
<script src="./global/compoents/editApp.js"></script>
<script src="./global/compoents/editProject.js"></script>
<script src="./global/compoents/delayProject.js"></script>
<script src="./global/compoents/delayProjectInfo.js"></script>
<script src="./global/echarts/echarts.common.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            openIndex:['1'],
            activeMenuIndex: '1-1',
            isCollapse:false,
            uniqueOpened:true,
            optionsCode:'',
            userId:'',
            projectId:'',
            templateId:'',
            currUsers:{
                id:'',
                name: '',
                email: '',
                password: '',
                phone : '',
                birthday: '',
                birthType: '',
                department: '',
                position: '',
                headUrl:''
            }
        },
        created:function(){
            let _this = this;
            axios({
                method: 'get',
                url: 'users/user',
            }).then(function (result) {
                if (result.data.success){
                    _this.currUsers = result.data.data;
                }else {
                    _this.$message({
                        message:result.data.msg,
                        type:'error'
                    });
                }
            });
        },
        mounted:function(){
            Bus.$on("optionsCode",(optionsCode) =>{//子组件数据改变之后传递给父组件
                this.optionsCode = optionsCode;
            });
            Bus.$on("userId",(userId) =>{//子组件数据改变之后传递给父组件
                this.userId = userId;
            });
            Bus.$on("projectId",(projectId) =>{//子组件数据改变之后传递给父组件
                this.projectId = projectId;
            });
            Bus.$on("templateId",(templateId) =>{//子组件数据改变之后传递给父组件
                this.templateId = templateId;
            });

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            goPersonalCenter:function(){
                this.openIndex = []
                this.optionsCode = 'personalCenter'
                this.activeMenuIndex ='0'
            },
            toIndex:function(){
                Vue.set(this.openIndex, 0,'1');
                this.activeMenuIndex = '1-1';
                this.optionsCode = ''
            },
            handleSelect:function(key,keypath){
                Vue.set(this.openIndex, 0,keypath[0]);
                this.activeMenuIndex = key;
                this.optionsCode = ''
            },
            switchMenuStatus:function () {
                this.isCollapse = !this.isCollapse
            },
            logout() {
                axios({
                    method: 'get',
                    url: 'logout',
                    data:''
                }).then(function (result) {
                    window.location.href="login";
                })
            },
        },
        components:{
            'index-comp':index_comp,
            'about-ours':abour_ours,
            'app-manger':app_manager,
            'code-sonar':code_sonar,
            'project-date':project_date,
            'week-report':week_report,
            'member-info':member_info,
            'add-user':add_user,
            'create-app':create_app,
            'create-project':create_project,
            'create-demand':create_demand,
            'personal-center':personal_center,
            'edit-user':edit_user,
            'change-pwd':change_pwd,
            'app-details':app_details,
            'edit-app':edit_app,
            'edit-project':edit_project,
            'delay-project':delay_project,
            'delay-project-info':delay_project_info
        }
    })
</script>
</body>
</html>